<script lang="ts" setup>
import { ref, onMounted } from "vue";
import type { Ref } from "vue";
import { useCounterStore } from "@/stores/counter";
import { getDoctorInfo, getCodeNum, addReservation } from "@/api/reservation";
import { getVisitorInfo, getVisitor } from "@/api/visitor";
import { useRouter } from "vue-router";
import { showNotify } from "vant";

const router = useRouter();
const useStore = useCounterStore();
const isActive: Ref<string> = ref('');

// 医生信息
interface IReservation {
  desc: string;
  hospital: string;
  id: number;
  image: string;
  kinds: string;
  name: string;
  position: string;
}
const reservationInfo: Ref<IReservation> = ref({
  desc: "",
  hospital: "",
  id: 0,
  image: "",
  kinds: "",
  name: "",
  position: "",
});
// 就诊人信息
interface IVisitorInfo {
  name: string;
  gender: string;
  age: number;
  cardid: string;
  username: string;
  isshow: boolean;
}
const visitorInfoList: Ref<IVisitorInfo[]> = ref([]);
onMounted(() => {
  isActive.value = ''
  getDoctorInfo({ id: useStore.reservationId }).then((res) => {
    reservationInfo.value = res.data[0];
  });
  getVisitorInfo().then((res) => {
    visitorInfoList.value = res.data.data;
    // console.log(visitorInfoList.value);
  });
});
// 点击添加
function addClick() {
  router.push("/addvisitor");
}

// 定义变量改变按钮样式
let showCss: Ref<boolean> = ref(true);
function btnClick() {
  showCss.value = !showCss.value;
}
// 点击选择就诊人
const tel: Ref<string> = ref("");
const visitorInfo: Ref<{
  name: string;
  gender: string;
  age: string;
  isshow: boolean;
}> = ref({ name: "", gender: "", age: "", isshow: false });
function selected(cardid: string,id:string) {
  getVisitor({ cardid: cardid }).then((res) => {
    isActive.value = id;
    tel.value = res.data[0].username;
    visitorInfo.value = res.data[0];
    visitorInfo.value.isshow = true;
    // console.log(visitorInfo.value);
  });
}
// 输入框输入的内容
const inputContent: Ref<string> = ref("");
// 验证码
const codeNum: Ref<string> = ref("");
const codeCount: Ref<string> = ref("");
// 验证码倒计时
const timeCode: Ref<number> = ref(60);
const showBtn: Ref<boolean> = ref(true);
function getCode() {
  getCodeNum().then((res) => {
    codeCount.value = res.data.data[0].codenum;
    console.log(codeCount.value);
    timeCode.value = 60;
    showBtn.value = false;
    let time = setInterval(() => {
      timeCode.value--;
      if (timeCode.value <= 0) {
        clearInterval(time);
        showBtn.value = true;
      }
    }, 1000);
  });
}
// 点击预约
// 没有医保卡执行
function fn() {
  addReservation({
    doctorname: reservationInfo.value.name,
    kinds: reservationInfo.value.kinds,
    hospital: reservationInfo.value.hospital,
    visitor: visitorInfo.value.name,
    gender: visitorInfo.value.gender,
    age: visitorInfo.value.age,
    image: reservationInfo.value.image,
    position: reservationInfo.value.position,
  }).then((res) => {
    if (res.data.length) {
      showNotify({ type: "success", message: "预约成功" });
    }
    // console.log(res.data);
    useStore.getReservationInfo(res.data[0]);
    router.push('/reservationinfo');
  });
}
// 有医保卡执行
function fun() {
  addReservation({
    doctorname: reservationInfo.value.name,
    kinds: reservationInfo.value.kinds,
    hospital: reservationInfo.value.hospital,
    visitor: visitorInfo.value.name,
    gender: visitorInfo.value.gender,
    age: visitorInfo.value.age,
    image: reservationInfo.value.image,
    position: reservationInfo.value.position,
    medicalInsurance: inputContent.value,
  }).then((res) => {
    if (res.data.length) {
      showNotify({ type: "success", message: "预约成功" });
    }
    // console.log(res.data);
    useStore.getReservationInfo(res.data[0]);
    router.push("/reservationinfo");
  });
}
function reservationClick() {
  if (codeNum.value !== codeCount.value) {
    return showNotify({ type: "warning", message: "验证码输入不正确" });
  }
  if (!showCss.value) {
    return fn();
  }
  if (!inputContent.value)
    return showNotify({ type: "danger", message: "医保卡不能为空" });
}
</script>

<template>
  <div>
    <van-nav-bar left-arrow title="预约信息" @click-left="$router.back()" />
    <div class="main">
      <div class="main_box">
        <div class="main_box_top">
          <van-image :src="reservationInfo.image" alt=""></van-image>
          <div>
            <span class="doctorName">{{ reservationInfo.name }}</span>
            <span>{{ reservationInfo.position }}</span>
            <p>{{ reservationInfo.hospital }}</p>
          </div>
        </div>
        <div class="main_box_center">
          <p>
            <span>就诊医院科室</span
            ><span>{{
              reservationInfo.hospital + "-" + reservationInfo.kinds
            }}</span>
          </p>
          <p><span>就诊类型</span><span>专家门诊</span></p>
          <p><span>医事服务费</span><span>318元</span></p>
        </div>
        <div class="main_box_bottom">
          <p>
            <van-icon color="orange" name="info" size="22" />
            <span style="color: orange">门诊预约挂号须知</span>
            <span>(预约即代表同意以下规则)</span>
          </p>
          <ul>
            <li>1.医事服务费由医院设定本平台不收取任何额外费用</li>
            <li>2.停诊将短信通知，请保持手机畅通</li>
            <li>3.实名制预约，就诊人信息不符将无法取号</li>
          </ul>
        </div>
      </div>
      <div>
        <p>选择就诊人：</p>
        <div class="visitor">
          <div
            :class="isActive === item.cardid? 'visitor_box active':'visitor_box'"
            v-for="item in visitorInfoList"
            :key="item.cardid"
            @click="selected(item.cardid,item.cardid)"
          >
            <p class="nameWeight">{{ item.name }}</p>
            <p>{{ item.gender + " | " + item.age }}</p>
          </div>
          <div
            v-if="visitorInfoList.length !== 4"
            class="visitor_box"
            @click="addClick"
          >
            <van-icon size="26" name="plus" />
          </div>
        </div>
      </div>
      <p>是否有医保卡</p>
      <div class="medicalInsurance">
        <van-button
          size="small"
          :type="showCss ? 'primary' : 'default'"
          @click="btnClick"
          >是</van-button
        >
        <van-button
          size="small"
          :type="!showCss ? 'primary' : 'default'"
          @click="btnClick"
          >否</van-button
        >
        <van-field
          v-if="showCss"
          v-model="inputContent"
          placeholder="输入医保卡号"
        />
        <van-field
          v-else
          v-model="inputContent"
          placeholder="输入医保卡号"
          disabled
        />
      </div>
      <p>
        就诊人手机号：<span ref="visitorTel">{{ tel }}</span>
      </p>
      <div class="code_box">
        <van-field v-model="codeNum" placeholder="输入验证码" />
        <van-button
          class="code_num"
          round
          type="primary"
          @click="getCode"
          v-if="showBtn"
          >发送验证码</van-button
        >
        <van-button class="code_num" v-else round type="default" disabled
          >{{ timeCode }}s后重新发送</van-button
        >
      </div>
      <van-button class="btn_box" @click="reservationClick" round type="primary"
        >立即预约</van-button
      >
    </div>
  </div>
</template>

<style lang="scss" scoped>
.active {
  box-shadow: 0.03rem 0.03rem 0.1rem skyblue;
}
.van-nav-bar,
.van-field {
  background-color: #f7fdff;
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 5%;
  overflow: auto;
  .main_box {
    background-color: #fff;
    padding: 0.1rem;
    width: 90%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    border-radius: 0.15rem;
    box-shadow: 0.03rem 0.03rem 0.1rem #393938;
    margin: 0.05rem 0;
    .main_box_top {
      height: 0.8rem;
      width: 100%;
      display: flex;
      padding-bottom: 0.03rem;
      border-bottom: 1px solid #d1eef8;
      .van-image {
        height: 100%;
        width: 1.5rem;
        margin-right: 0.15rem;
      }
      .doctorName {
        font-size: 0.2rem;
      }
      span {
        font-weight: 900;
      }
    }
    .main_box_center {
      border-bottom: 1px solid #d1eef8;
      p {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .visitor {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    .visitor_box {
      background-color: #fff;
      flex-shrink: 0;
      padding: 0.1rem;
      width: 30%;
      height: 0.5rem;
      display: flex;
      flex-direction: column;
      border-radius: 0.15rem;
      // box-shadow: 0.03rem 0.03rem 0.1rem #393938;
      margin: 0.05rem 0;
      margin-right: 0.1rem;
      .van-icon {
        margin: auto;
        font-weight: 700;
      }
      p {
        padding: 0;
        margin: 0;
        margin-bottom: 0.1rem;
      }
      .nameWeight {
        font-size: 0.2rem;
        font-weight: 900;
      }
    }
  }
  .medicalInsurance {
    display: flex;
    align-items: center;
  }
  .code_box {
    display: flex;
    .code_num {
      width: 30%;
    }
  }
  .btn_box {
    margin-top: 0.5rem;
    align-self: center;
    width: 50%;
  }
}
</style>
